<template>
    <div>
        <el-tabs>
            <el-tab-pane label="产品">
                <el-form :model="appcai" label-width="110px" style="overflow:hidden" :rules="caiRule" ref="caiRule">
                    <el-form-item prop="emp" label="申请人" class="inline__">
                        <el-input v-model="appcai.emp.empName" :readonly="true"></el-input>
                    </el-form-item>
                    <el-form-item prop="appCaiDan" label="申请采购单号" class="inline__">
                        <el-input v-model="appcai.appCaiDan" :readonly="true"></el-input>
                    </el-form-item>
                    <el-form-item prop="appDate" label="申请日期" class="inline__">
                        <el-input :readonly="true">
                            <span style="color:rgb(110,110,110);margin-left: 10px;font-size: 13px" slot="prefix">{{appcai.appDate | format_date}}</span>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="supplier" label="供货商" class="inline__">
                        <el-select v-model="appcai.supplier" placeholder="请选择供货商" value-key="supplierId">
                            <el-option v-for="i in supplierList" :key="i.supplierId" :label="i.supplierName" :value="i"></el-option>
                        </el-select>
                        <el-button style="margin-left:10px;height: 40px" class="is-top" size="small" @click="supplier_activeVisitable=true"><i class="iconfont icon-jiahao" > 添加新供货商</i></el-button>
                    </el-form-item>
                    <el-form-item prop="remark" label="备注" class="inline__">
                        <el-input v-model="appcai.remark"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-left:130px;">
                        <el-button type="primary" @click="addCai('caiRule')">保存</el-button>
                        <el-button @click="cancel">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane  label="采购产品" >
                <el-button class="is-top" size="small" @click="openDetail"><i class="iconfont icon-jiahao" > 添加产品</i></el-button>
                <el-table :data="appDetailList">
                    <el-table-column prop="appProduct" label="产品名称" align="center"  > </el-table-column>
                    <el-table-column prop="appCount" label="产品数量" align="center"></el-table-column>
                    <el-table-column prop="appPrice" label="产品单价" align="center"></el-table-column>
                    <el-table-column prop="appUnit" label="产品品牌" align="center"></el-table-column>
                    <el-table-column prop="appStand" label="产品属性" align="center"></el-table-column>
                    <el-table-column prop="appTotal" label="总价" align="center"></el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="s">
                            <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="delete_product(s.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <!--新增供货商-->
        <el-dialog title="新增供货商" width="30%" :visible.sync="supplier_activeVisitable"  :modal="false" :close-on-click-modal="false">
            <el-form :model="supplierForm" :rules="supplierRule" ref="supplierRule" style="overflow: hidden">
                <el-form-item prop="supplierName" label="供货商名称">
                    <el-input v-model="supplierForm.supplierName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label-width="100px" style="width:100%;margin-top:60px;">
                    <el-button type="primary" @click="addSupplier('supplierRule')">保 存</el-button>
                    <el-button @click="clearSupplierForm(),supplier_activeVisitable = false">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--添加新产品-->
        <el-dialog :visible.sync="new_detail_activeVisitable" width="50%" :close-on-click-modal="false" append-to-body>
            <add_purchase_product></add_purchase_product>
        </el-dialog>
        <!--添加已有产品-->
        <el-dialog :visible.sync="detail_activeVisitable" width="80%" :close-on-click-modal="false" append-to-body>
            <purchase_add_poduct></purchase_add_poduct>
        </el-dialog>
    </div>
</template>

<script>

    import add_purchase_product from "./add_purchase_product";
    import purchase_add_poduct from "./purchase_add_poduct";

    export default {
        name: "add_purchase",
        components: {
            add_purchase_product,
            purchase_add_poduct
        },
        data() {
            return{
                //供货商数据
                supplierList:[],
                supplierForm:{
                    supplierName:''
                },
                //新增供货商规则
                supplierRule: {
                    supplierName: [
                        { required: true, message: '请输入供货商名称', trigger: 'blur' }
                    ]
                },
                //新增申请采购抬头表规则
                caiRule: {
                    supplier: [
                        { required: true, message: '请选择供货商', trigger: 'blur' }
                    ]
                },
                //新增申请采购单产品弹框状态
                new_detail_activeVisitable:false,
                detail_activeVisitable:false,
                //新增供货商弹框状态
                supplier_activeVisitable:false,
                //新增申请采购抬头表数据
                appcai:{
                    appCaiId:0,
                    appCaiDan:this.$store.state.vueAppCai.appCaiDan,
                    appDate:new Date,
                    caiSite:'无',
                    appTotal:0,
                    appState:0,
                    remark:'',
                    emp:this.$store.state.user,
                    appDetail:[],
                    supplier:[]
                },
                //新增申请采购详情表产品数据
                appDetailList:[]
            }
        },
        methods:{
            //供货商查询
            supplier(){
                this.axios.get("api/caigou/supplier-list").then(v=>{
                    this.supplierList=v.data;
                }).catch()
            },
            //清除供货商数据
            clearSupplierForm(){
                this.supplierForm={
                    supplierName:''
                }
            },
            //新增供货商
            addSupplier(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        window.console.log(this.supplierForm)
                        this.axios.post("api/caigou/add-supplier", this.supplierForm)
                            .then(v => {
                                    window.console.log(v)
                                    this.supplier();
                                    this.clearSupplierForm();
                                    this.global.mes_success("操作成功");
                                    this.supplier_activeVisitable = false;
                                }
                            ).catch(err => {
                            window.console.log(err)
                        })
                    }else {
                        this.global.mes_warning("供货商名称不能为空！")
                        return false;
                    }
                });
            },
            //新增申请采购抬头表
            addCai(ruleName){
                this.$refs[ruleName].validate((valid) => {
                    if (valid) {
                        this.appcai.appDetail =this.appDetailList;
                        this.appDetailList.forEach(i=>{
                            this.appcai.appTotal+=i.appTotal;
                        })
                        this.$axios.post("api/caigou/add_appcai",this.appcai)
                            .then(() => {
                                this.clearAppcai();
                                this.$store.state.vueAppCai.addpurchaseVisible = false;
                                if(this.$store.state.vueAppCai.get_appcai){
                                    this.$store.state.vueAppCai.currPage=1;
                                    this.$store.state.vueAppCai.get_appcai(1);
                                }else{
                                    this.$router.push({
                                        path:"/purchase_index"
                                    })
                                }
                                this.global.mes_success("申请成功");
                            }).catch()
                    }else {
                        this.global.mes_warning("请正确填写申请采购单")
                        return false;
                    }
                });
            },
            //取消新增
            cancel(){
                this.$store.state.vueAppCai.addpurchaseVisible = false;
                this.clearAppcai();
            },
            //清空申请采购抬头表数据
            clearAppcai(){
                this.appcai={
                    appCaiId:0,
                    appCaiDan:this.$store.state.vueAppCai.appCaiDan,
                    appDate:new Date,
                    caiSite:'无',
                    appTotal:0,
                    appState:0,
                    remark:'',
                    emp:this.$store.state.user,
                    appDetail:[],
                    supplier:[]
                };
                this.appDetailList=[]
            },
            //打开添加新产品弹框
            openDetailNew(){
                this.new_detail_activeVisitable = true;
                this.$store.dispatch("setVueDetail",this)
            },
            //打开添加已有产品弹框
            openDetail(){
                this.detail_activeVisitable = true;
                this.$store.dispatch("setVueDetail",this)
            },
            //删除产品
            delete_product(row){
                this.global.confirm("提示","确认删除？",
                    () => {
                        this.appDetailList.splice(this.appDetailList.indexOf(row),1)
                        this.global.mes_success("删除成功")
                    },() => {
                        this.global.mes_message("取消删除")
                    })
            },
        },
        computed:{

        },
        created(){
            this.supplier();
        }
    }
</script>

<style scoped>
    .el-select{width: 66%!important;}
    .inline__{width:90%!important;display:inline-block}
</style>